<template>
  <div ref="chartRef" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";

const chartRef = ref(null);

onMounted(() => {
  initChart();
});

const initChart = () => {
  const chartInstance = echarts.init(chartRef.value);

  // 定义折线图的数据和配置
  const option = {
    title: { text: "历年居住女生人数统计" },

    xAxis: {
      type: "category",
      data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"],
    },
    yAxis: {
      type: "value",
    },
    lineStyle: {
      color: "red",
    },
    series: [
      {
        data: [890, 932, 901, 1500, 700, 1330, 900, 1320, 2000],
        type: "line",
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  chartInstance.setOption(option);
};

// 可选：监听窗口大小变化，自动调整图表大小
onBeforeUnmount(() => {});
</script>

<style scoped>
/* 这里可以添加自定义样式 */
</style>
